<template>
  <el-dialog
    :title="edit_id ? '编辑场景' : '新建场景'"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :append-to-body="true"
    width="800px"
    @close="handleCancel"
  >
    <div class="scene-name-container">
      <div class="scene-name">场景名称</div>
      <el-input
        v-model.trim="saveName"
        :maxlength="10"
        class="scene-input"
        placeholder="请输入场景名称，最多10个字符"
      />
    </div>
    <div class="scene-name">筛选条件</div>
    <el-form id="scene-filter-container" class="filter-container">
      <el-form-item>
        <template v-for="(formItem, index) in form">
          <el-row :key="index">
            <el-col :span="8">
              <el-select
                filterable
                v-model="formItem.fieldName"
                placeholder="请选择要筛选的字段名"
                @change="fieldChange(formItem)"
                @focus="fieldFocus"
              >
                <el-option
                  v-for="item in fieldList"
                  :key="item.fieldName"
                  :label="item.name"
                  :value="item.fieldName"
                />
              </el-select>
            </el-col>

            <el-col v-if="showCalCondition(formItem.formType)" :span="1"
              >&nbsp;</el-col
            >
            <el-col v-if="showCalCondition(formItem.formType)" :span="4">
              <el-select
                v-model="formItem.condition"
                placeholder="请选择范围"
                @change="selectChange($event, formItem)"
              >
                <el-option
                  v-for="item in getAdvancedFilterOptions(formItem.formType)"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>

            <!-- 商机组 -->
            <el-col v-if="formItem.formType == 'business_type'" :span="1"
              >&nbsp;</el-col
            >
            <el-col v-if="formItem.formType == 'business_type'" :span="4">
              <el-select
                v-model="formItem.typeId"
                @change="typeOptionsChange(formItem)"
              >
                <el-option
                  v-for="item in formItem.typeOption"
                  :key="item.typeId"
                  :label="item.name"
                  :value="item.typeId"
                />
              </el-select>
            </el-col>

            <el-col :span="1">&nbsp;</el-col>
            <el-col
              :span="
                formItem.formType === 'datetime' ||
                formItem.formType === 'date' ||
                formItem.formType === 'map_address'
                  ? 13
                  : 8
              "
            >
              <el-select
                v-if="
                  formItem.formType === 'checkStatus' ||
                    formItem.formType === 'dealStatus' ||
                    (formItem.formType === 'select' &&
                      getSettingValueType(formItem.setting) != 'string')
                "
                v-model="formItem.value"
                placeholder="请选择筛选条件"
              >
                <el-option
                  v-for="item in formItem.setting"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
              <el-select
                v-else-if="
                  formItem.formType === 'select' ||
                    formItem.formType === 'checkbox'
                "
                v-model="formItem.value"
                multiple
                placeholder="请选择筛选条件"
              >
                <el-option
                  v-for="item in formItem.setting"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
              <el-date-picker
                v-else-if="
                  formItem.formType === 'date' ||
                    formItem.formType === 'datetime'
                "
                v-model="formItem.value"
                :value-format="
                  formItem.formType === 'date'
                    ? 'yyyy-MM-dd'
                    : 'yyyy-MM-dd HH:mm:ss'
                "
                :type="
                  formItem.formType === 'date' ? 'daterange' : 'datetimerange'
                "
                style="padding: 0px 10px;"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
              <el-select
                v-else-if="formItem.formType === 'business_type'"
                v-model="formItem.statusId"
              >
                <el-option
                  v-for="item in formItem.statusOption"
                  :key="item.statusId"
                  :label="item.name"
                  :value="item.statusId"
                />
              </el-select>
              <!-- <xh-user-cell
                v-else-if="
                  formItem.formType === 'user' ||
                    formItem.formType === 'single_user'
                "
                :item="formItem"
                :info-params="{ m: 'crm', c: crmType, a: 'index' }"
                :value="formItem.value"
                @value-change="arrayValueChange"
              /> -->

              <relate-empoyee
                v-else-if="
                  ['single_user', 'user', 'user_mul'].includes(
                    formItem.formType
                  )
                "
                style="width: 100%;"
                :visible="false"
                :show-input="true"
                :isShowName="true"
                :user-id="formItem.value"
                ref="relate_empoyee"
                @save="depOrUserChange($event, formItem, 'user')"
              >
              </relate-empoyee>

              <!-- 部门 -->
              <manage-dep
                v-else-if="formItem.formType === 'structure_mul'"
                @submitDeps="depOrUserChange($event, formItem, 'dept')"
                :manageDeptId="formItem.value"
                :restrictData="formItem.restrictData"
                :showIpt="true"
                :visible="false"
                :isShowName="true"
              >
              </manage-dep>

              <!-- 多级下拉 -->
              <level-select
                ref="levelSelect"
                v-else-if="formItem.formType == 'leve_linkage'"
                :value="formItem.levelData"
                :editVal="formItem.value"
                @stage="stageChange($event, formItem, index)"
              >
              </level-select>

              <xh-structure-cell
                v-else-if="formItem.formType === 'structure'"
                :item="formItem"
                :value="formItem.value"
                @value-change="arrayValueChange"
              />
              <xh-prouct-cate
                v-else-if="formItem.formType === 'category'"
                :item="formItem"
                :value="formItem.value"
                @value-change="arrayValueChange"
              />
              <v-distpicker
                v-else-if="formItem.formType === 'map_address'"
                :province="formItem.address.state"
                :city="formItem.address.city"
                :area="formItem.address.area"
                @province="selectProvince($event, formItem)"
                @city="selectCity($event, formItem)"
                @area="selectArea($event, formItem)"
              />
              <el-input
                v-else
                v-model="formItem.value"
                placeholder="多个条件请用；隔开"
              />
            </el-col>
            <el-col :span="1" class="delete">
              <i
                class="el-icon-error delete-btn"
                @click="handleDelete(index)"
              />
            </el-col>
          </el-row>
        </template>
      </el-form-item>
    </el-form>
    <p v-show="showErrors" class="el-icon-warning warning-info">
      <span class="desc">筛选条件中有重复项！</span>
    </p>
    <el-button type="text" @click="handleAdd">+ 添加筛选条件</el-button>
    <div class="save">
      <div class="save-setting">
        <el-checkbox v-model="saveDefault">设置为默认</el-checkbox>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button v-debounce="handleConfirm" type="primary">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { userListAPI, depListAPI } from "@/api/common";
import { crmSceneSaveAPI, crmSceneUpdateAPI } from "@/api/crm/common";
import { productCategoryIndexAPI } from "@/api/admin/crm";

import crmTypeModel from "@/views/crm/model/crmTypeModel";
import {
  XhUserCell,
  XhProuctCate,
  XhStructureCell
} from "@/components/CreateCom";
import RelateEmpoyee from "@/views/admin/components/RelateEmpoyee"; // 人员多选
import ManageDep from "@/views/admin/components/manageDep"; // 部门多选
import LevelSelect from "@/components/NewCom/LevelSelect"; // 多级下拉
import VDistpicker from "@/components/VDistpicker";

import { objDeepCopy } from "@/utils";
import AdvancedFilterMixin from "@/mixins/AdvancedFilter";
import { mapGetters } from "vuex";
/**
 * fieldList: 高级筛选的字段
 *     type:  date || datetime || select || 其他 input
 */
export default {
  name: "SceneCreate", // 新建场景
  components: {
    XhUserCell,
    XhProuctCate,
    VDistpicker,
    XhStructureCell,
    RelateEmpoyee,
    ManageDep,
    LevelSelect
  },
  mixins: [AdvancedFilterMixin],
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
      default: false
    },
    fieldList: {
      type: Array,
      required: true,
      default: () => {
        return [];
      }
    },
    obj: {
      type: Object,
      required: true,
      default: () => {
        return {};
      }
    },
    /** 没有值就是全部类型 有值就是当个类型 */
    crmType: {
      type: String,
      default: ""
    },
    /** 名字和 默认 id 编辑的时候需要 */
    name: {
      type: String,
      default: ""
    },
    isDefault: {
      type: Boolean,
      default: false
    },
    edit_id: {
      type: String,
      default: ""
    }
  },
  computed: {
    ...mapGetters(["userAllList", "depAllList"])
  },
  data() {
    return {
      form: [],
      visible: false, // 控制展示
      showErrors: false,
      saveDefault: false, // 设置为默认场景
      saveName: null // 场景名称
    };
  },
  watch: {
    dialogVisible: {
      handler(val) {
        if (val) {
          // 处理编辑数据
          if (this.edit_id) {
            this.form = [];
            for (const field in this.obj.obj) {
              const element = this.obj.obj[field];
              const item = this.getItem();
              item.fieldName = element.name;
              item.formType = element.formType;
              item.type = element.type;
              this.getAdvancedFilterOptions(element.formType).forEach(child => {
                if (element.type === child.type) {
                  item.condition = child.value;
                }
              });

              // 校准setting
              if (
                item.formType === "checkbox" ||
                item.formType === "select" ||
                item.formType === "dealStatus" ||
                item.formType === "checkStatus"
              ) {
                item.setting = this.getEditSetting(
                  item.formType,
                  item.fieldName
                );
              }

              if (element.formType == "date") {
                item.value = element.values;
              } else if (element.formType == "datetime") {
                item.value = element.values;
              } else if (element.formType == "business_type") {
                item.typeId = element.values[0];
                item.statusId =
                  element.values.length > 1 ? element.values[1] : null;
                item.typeOption = this.getEditSetting(
                  item.formType,
                  item.fieldName
                );
                if (element.typeId) {
                  const obj = item.typeOption.find(typeItem => {
                    return typeItem.typeId === element.typeId;
                  });
                  if (obj) {
                    item.statusOption = obj.statusList;
                  } else {
                    item.statusOption = [];
                  }
                }
              } else if (
                element.formType == "user" ||
                element.formType == "single_user"
              ) {
                item.value = [];
                this.getEditUserValue(item, element.values[0]);
              } else if (element.formType == "structure") {
                item.value = [];
                this.getEditDepValue(item, element.values[0]);
              } else if (element.formType == "checkbox") {
                item.value = element.values;
              } else if (element.formType == "select") {
                if (this.getSettingValueType(item.setting) != "string") {
                  item.value = element.values[0];
                } else {
                  item.value = element.values;
                }
              } else if (element.formType == "category") {
                item.value = [];
                this.getProductCategoryValue(item, element.values[0]);
              } else if (element.formType == "map_address") {
                const addressArr = element.values[0].split(",");
                item.address = {
                  state: addressArr.length > 0 ? addressArr[0] : "",
                  city: addressArr.length > 1 ? addressArr[1] : "",
                  area: addressArr.length > 2 ? addressArr[2] : ""
                };
              } else {
                item.setting = element.setting;
                item.value = element.values[0];
              }

              this.form.push(item);
            }
          } else {
            this.form = objDeepCopy(this.obj.form);
            if (this.form.length == 0) {
              this.form.push(this.getItem());
            }
          }
          /** 只有编辑会牵扯到这两个字段赋值 */
          if (this.name) {
            this.saveName = this.name;
          } else {
            this.saveName = "";
          }
          if (this.isDefault) {
            this.saveDefault = this.isDefault;
          } else {
            this.saveDefault = false;
          }
        }
        this.visible = this.dialogVisible;
      },
      deep: true,
      immediate: true
    },

    form() {
      this.$nextTick(() => {
        var container = document.getElementById("scene-filter-container");
        container.scrollTop = container.scrollHeight;
      });
    }
  },
  methods: {
    /**
     * 获取编辑setting
     */
    getEditSetting(formType, fieldName) {
      const obj = this.fieldList.find(item => {
        return item.formType == formType && item.fieldName == fieldName;
      });

      if (obj) {
        return obj.setting;
      }

      return [];
    },

    /**
     * 获取选择user的信息
     */
    getEditUserValue(item, id) {
      if (!id) {
        return;
      }
      userListAPI({
        pageType: 0
      })
        .then(res => {
          const users = res.data || [];
          for (let index = 0; index < users.length; index++) {
            const user = users[index];
            if (user.userId == id) {
              item.value = [user];
              break;
            }
          }
        })
        .catch(() => {});
    },

    /**
     * 获取选择dep的信息
     */
    getEditDepValue(item, id) {
      if (!id) {
        return;
      }
      depListAPI()
        .then(res => {
          const deps = res.data || [];
          for (let index = 0; index < deps.length; index++) {
            const dep = deps[index];
            if (dep.id == id) {
              item.value = [dep];
              break;
            }
          }
        })
        .catch(() => {});
    },

    /**
     * 获取产品类别的值
     */
    getProductCategoryValue(item, categoryId) {
      productCategoryIndexAPI()
        .then(res => {
          const categoryList = res.data || [];
          const categoryIds = [];
          this.filterProductTree(categoryList, categoryId, categoryIds);
          item.value = categoryIds.reverse();
        })
        .catch(() => {});
    },

    filterProductTree(tree, categoryId, categoryIds) {
      for (let index = 0; index < tree.length; index++) {
        const element = tree[index];
        if (element.categoryId == categoryId) {
          categoryIds.push(categoryId);
          this.filterProductTree(tree, element.pid, categoryIds);
          break;
        }
      }
    },

    /**
     * 位置更改
     */
    selectProvince(data, formItem) {
      formItem.address.state = data.value;
    },
    selectCity(data, formItem) {
      formItem.address.city = data.value;
    },
    selectArea(data, formItem) {
      formItem.address.area = data.value;
    },

    getItem() {
      return {
        fieldName: "",
        name: "",
        type: 3,
        formType: "",
        condition: "contains",
        value: "",
        setting: [],
        typeOption: [],
        statusOption: [],
        typeId: "",
        statusId: ""
      };
    },
    /**
     * 商机组状态
     */
    typeOptionsChange(formItem) {
      if (formItem.typeId) {
        const obj = formItem.typeOption.find(item => {
          return item.typeId === formItem.typeId;
        });
        formItem.statusOption = obj.statusList || [];
      } else {
        formItem.statusOption = [];
      }
      formItem.statusId = "";
    },
    // 部门 人员
    depOrUserChange(data, formItem, type) {
      let arr = null;
      typeof data == "string" ? (arr = data.split(",")) : (arr = data);
      let index = 0;
      // 找到指定的筛选条件
      this.form.forEach((p, i) => {
        if (p.fieldName == formItem.fieldName) {
          index = i;
        }
      });
      if (arr[0] != "") {
        const valueContent = [];
        arr.forEach((item, it) => {
          if (type == "user") {
            this.userAllList.forEach(item => {
              if (item.userId == arr[it]) {
                valueContent.push(item);
                return;
              }
            });
          } else if (type == "dept") {
            this.depAllList.forEach(item => {
              if (item.deptId == arr[it]) {
                valueContent.push(item);
                return;
              }
            });
          }
        });
        this.form[index].value = arr;
        this.form[index].valueContent = valueContent;
      } else {
        this.form[index].value = [];
      }
    },
    // 多级下拉
    stageChange(data, formItem) {
      let index = 0;
      const refN = this.$refs.levelSelect[0];
      // 找到指定的筛选条件
      this.form.forEach((p, i) => {
        if (p.fieldName == formItem.fieldName) {
          index = i;
        }
      });
      if (data) {
        this.form[index].value = `${refN.first_val}${
          refN.second_val ? "|" + refN.second_val : ""
        }${refN.three_val ? "|" + refN.three_val : ""}`;

        this.form[index].valueContent = `${refN.first_val}${
          refN.second_val ? "|" + refN.second_val : ""
        }${refN.three_val ? "|" + refN.three_val : ""}`;
      } else {
        this.form[index].value = [];
      }
    },
    /**
     * 用户创建人
     * 产品类别
     */
    arrayValueChange(data) {
      if (data.value.length > 0) {
        data.item.value = data.value;
        data.item.valueContent = data.valueContent;
      } else {
        data.item.value = [];
      }
    },
    /**
     * 连接条件的变更
     */
    selectChange(event, formItem) {
      this.getAdvancedFilterOptions(formItem.formType).forEach(item => {
        if (item.value === event) {
          formItem.type = item.type;
        }
      });
    },
    /**
     * 是否展示条件
     */
    showCalCondition(formType) {
      if (
        formType == "date" ||
        formType == "datetime" ||
        formType == "business_type" ||
        formType == "category" ||
        formType == "map_address"
      ) {
        return false;
      }
      return true;
    },

    /**
     * 聚焦
     */
    fieldFocus() {
      this.$el.click();
    },

    /**
     * 当前选择的字段名改变，判断是否有重复
     * @param formItem
     */
    fieldChange(formItem) {
      const obj = this.fieldList.find(item => {
        return item.fieldName === formItem.fieldName;
      });
      if (obj) {
        formItem.formType = obj.formType;
        formItem.name = obj.name;
        if (formItem.formType == "business_type") {
          formItem.typeOption = obj.setting;
          formItem.statusOption = [];
          formItem.typeId = "";
          formItem.statusId = "";
          formItem.value = "";
        } else if (
          formItem.formType == "checkStatus" ||
          formItem.formType == "dealStatus"
        ) {
          formItem.setting = obj.setting || [];
          formItem.value = "";
        } else if (formItem.formType == "map_address") {
          formItem.address = {
            state: "",
            city: "",
            area: ""
          };
        } else if (
          formItem.formType === "date" ||
          formItem.formType === "datetime" ||
          formItem.formType === "user" ||
          formItem.formType === "single_user" ||
          formItem.formType === "structure" ||
          formItem.formType === "category"
        ) {
          formItem.value = [];
        } else if (
          formItem.formType == "select" ||
          formItem.formType === "checkbox"
        ) {
          formItem.setting = obj.setting || [];
          formItem.value = [];
        } else {
          formItem.value = "";
        }

        // 条件校准
        if (
          formItem.formType == "checkbox" ||
          formItem.formType == "checkStatus" ||
          formItem.formType == "dealStatus"
        ) {
          formItem.condition = "is";
          formItem.type = 1;
        } else if (
          formItem.formType == "user" ||
          formItem.formType == "single_user" ||
          formItem.formType == "structure"
        ) {
          formItem.condition = "contains";
          formItem.type = 3;
        } else if (formItem.formType == "select") {
          formItem.condition = "in";
          formItem.type = 1;
        } else {
          formItem.condition = "is";
          formItem.type = 1;
        }
      }

      this.getError();
    },
    /**
     * 取消选择
     */
    handleCancel() {
      this.visible = false;
      this.$emit("update:dialogVisible", false);
    },

    /**
     *获取错误
     */
    getError() {
      this.showErrors = false;
      const fieldNames = [];
      for (let index = 0; index < this.form.length; index++) {
        const item = this.form[index];
        if (fieldNames.includes(item.fieldName)) {
          this.showErrors = true;
          break;
        } else {
          fieldNames.push(item.fieldName);
        }
      }
    },

    /**
     * 确定选择
     */
    handleConfirm() {
      if (this.showErrors) {
        this.$message.error("筛选条件中有重复项！");
        return;
      }
      if (!this.saveName || this.saveName === "") {
        this.$message.error("场景名称不能为空！");
        return;
      }
      for (let i = 0; i < this.form.length; i++) {
        const o = this.form[i];
        if (!o.fieldName || o.fieldName === "") {
          this.$message.error("要筛选的字段名称不能为空！");
          return;
        }

        if (o.formType == "business_type") {
          if (!o.typeId && !o.statusId) {
            this.$message.error("筛选内容不能为空！");
            return;
          }
        } else if (o.formType == "map_address") {
          if (!o.address.state && !o.address.city && !o.address.area) {
            this.$message.error("筛选内容不能为空！");
            return;
          }
        } else if (
          o.formType == "date" ||
          o.formType == "datetime" ||
          o.formType == "user" ||
          o.formType == "single_user" ||
          o.formType == "structure" ||
          o.formType == "category" ||
          o.formType == "checkbox"
        ) {
          if (!o.value || o.value.length === 0) {
            this.$message.error("筛选内容不能为空！");
            return;
          }
        } else if (
          o.value === "" ||
          o.value === undefined ||
          o.value === null
        ) {
          this.$message.error("筛选内容不能为空！");
          return;
        }
      }
      const obj = [];
      this.form.forEach(o => {
        if (o.formType == "datetime" || o.formType == "date") {
          obj.push({
            formType: o.formType,
            name: o.fieldName,
            type: o.formType == "date" ? 11 : 12,
            values: o.value
          });
        } else if (o.formType == "business_type") {
          obj.push({
            formType: o.formType,
            name: o.statusId ? "statusId" : "typeId",
            type: 1,
            values: o.statusId ? [o.typeId, o.statusId] : [o.typeId]
          });
        } else if (o.formType == "user" || o.formType == "single_user") {
          obj.push({
            type: o.type,
            values: [o.value[0].userId],
            formType: o.formType,
            name: o.fieldName
          });
        } else if (o.formType == "structure") {
          obj.push({
            type: o.type,
            values: [o.value[0].id],
            formType: o.formType,
            name: o.fieldName
          });
        } else if (o.formType == "checkbox") {
          obj.push({
            type: o.type,
            values: o.value,
            formType: o.formType,
            name: o.fieldName
          });
        } else if (o.formType == "category") {
          obj.push({
            type: 1,
            values: [o.value[o.value.length - 1]],
            formType: o.formType,
            name: o.fieldName
          });
        } else if (o.formType == "select") {
          let values = o.value;
          if (this.getSettingValueType(o.setting) != "string") {
            values = [o.value];
          }
          obj.push({
            type: o.type,
            values: values,
            formType: o.formType,
            name: o.fieldName
          });
        } else if (o.formType == "map_address") {
          const value = [];
          for (const key in o.address) {
            const addValue = o.address[key];
            if (addValue) {
              value.push(addValue);
            }
          }
          obj.push({
            values: [value.join(",")],
            type: 1,
            formType: o.formType,
            name: o.fieldName
          });
        } else if (o.formType == "structure_mul" || o.formType == "user_mul") {
          const obj_before = {
            type: o.type,
            formType: o.formType,
            name: o.fieldName,
            dataType: o.formType == "structure_mul" ? 7 : 8,
            values: o.value
          };
          obj.push(obj_before);
        } else {
          let values = [];
          if (typeof o.value === "string") {
            const temp = o.value.replace(/；/g, ";");
            values = temp
              .split(";")
              .filter(item => item !== "" && item !== null);
          } else {
            values = [o.value];
          }

          obj.push({
            type: o.type,
            values: values,
            formType: o.formType,
            name: o.fieldName
          });
        }
      });
      const data = {
        obj: obj,
        form: this.form,
        saveDefault: this.saveDefault,
        saveName: this.saveName
      };
      this.requestCreateScene(data);
    },
    // 创建场景
    requestCreateScene(data) {
      /** 编辑操作 */
      if (this.edit_id) {
        crmSceneUpdateAPI({
          isDefault: data.saveDefault ? 1 : 0,
          name: data.saveName,
          sceneId: this.edit_id,
          type: crmTypeModel[this.crmType],
          data: JSON.stringify(data.obj)
        })
          .then(res => {
            this.$message({
              type: "success",
              message: "编辑成功"
            });
            // 新建成功
            this.$emit("save-success");
            this.handleCancel();
          })
          .catch(() => {});
      } else {
        crmSceneSaveAPI({
          type: crmTypeModel[this.crmType],
          isDefault: data.saveDefault ? 1 : 0,
          name: data.saveName,
          data: JSON.stringify(data.obj)
        })
          .then(res => {
            // 新建成功
            this.$emit("save-success");
            this.$message({
              type: "success",
              message: "创建成功"
            });
            this.handleCancel();
          })
          .catch(() => {});
      }
    },
    /**
     * 添加筛选条件
     */
    handleAdd() {
      this.form.push(this.getItem());
    },
    /**
     * 删除筛选条件
     * @param index
     */
    handleDelete(index) {
      this.$confirm("您确定要删除这一条数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.form.splice(index, 1);
          this.getError();
        })
        .catch(() => {});
    },

    /**
     * 获取setting数据类型
     */
    getSettingValueType(setting) {
      if (setting && setting.length > 0) {
        const value = setting[0];
        return typeof value;
      }
      return [];
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__body {
  padding: 10px 20px;
}

/deep/ .el-form-item__label {
  width: 100%;
  text-align: left;
}
.filter-container {
  max-height: 200px;
  overflow-y: auto;
}

.save {
  margin-top: 10px;
  .name {
    width: 300px;
    margin-left: 10px;
    /deep/ .el-input__inner {
      height: 32px;
    }
  }
  .save-setting {
    margin-top: 20px;
  }
}

.el-form-item {
  margin-bottom: 0;
}

.el-row {
  margin-bottom: 20px;
  .delete-btn {
    margin-left: 15px;
    color: #bbb;
    cursor: pointer;
  }
  .el-select,
  .el-date-editor {
    width: 100%;
  }
}

.warning-info {
  width: 100%;
  font-size: 14px;
  color: #f56c6c;
  margin-top: 10px;
  .desc {
    padding-left: 8px;
  }
}

.scene-name-container {
  padding-bottom: 15px;
  .scene-input {
    width: 300px;
  }
}
.scene-name {
  margin-bottom: 10px;
}

.distpicker-address-wrapper /deep/ select {
  border-radius: 2px;
  font-size: 13px;
  height: 34px;
  -webkit-appearance: none;
  background-image: url();
  background-position: calc(100% - 4px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 11px;
}
</style>
